function show(query, show) {
  document.querySelectorAll(query).forEach(function (e) {
    e.style.display = show ? '' : 'none'
  })
}

function IsPC() {
  let userAgentInfo = navigator.userAgent;
  let Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod");
  let flag = true;
  for (let v = 0; v < Agents.length; v++) {
    if (userAgentInfo.indexOf(Agents[v]) > 0) {
      flag = false;
      break;
    }
  }
  return flag;
}

// 激活菜单
function active(i) {
  document.querySelectorAll('.menus a').forEach(function (e, j) {
    if (i == j % 2) { // 大屏右侧菜单 与 小屏弹出菜单 保持同步
      e.style.color = 'white';
    } else {
      e.style.color = '#7f7f7f';
    }
  });
  if (i == 0) {
    show('#home, #content', true)
    show('#join', false)
  }
  if (i == 1) {
    show('#home, #content', false)
    show('#join', true)
  }
}

function show_menu_phone(show) {
  document.getElementById('menu_phone').className = show ? '' : 'none'
}

(function () {
    active(0)

    // 菜单自动切换
    function GetRect(element) {
      var rect = element.getBoundingClientRect();
      var top = !!document.documentElement.clientTop ? document.documentElement.clientTop : 0;
      var left = !!document.documentElement.clientLeft ? document.documentElement.clientLeft : 0;
      return {
        top: rect.top - top,
        bottom: rect.bottom - top,
        left: rect.left - left,
        right: rect.right - left
      };
    }

    var $download = document.getElementById('download');
    var windowH = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; //浏览器高度兼容写法
    window.onscroll = function () {
      // active(0)
      // var obj = GetRect($download);
      // if (obj.top >= windowH) {
      //   active(0)
      // }
      // if (obj.top < windowH && obj.bottom >= windowH) {
      //   active(1)
      // }
    };

    var time = null;
    // 字体动画
    var fonts = [
      200,
      300,
      400,
      500,
      600,
      700,
      900
    ];

    function font_animate() {
      var cur = 0, cur2 = 2;
      var inc = true, inc2 = true;
      time = setInterval(function () {
        inc == true ? cur++ : cur--;
        if (cur == fonts.length) {
          inc = false;
          cur = fonts.length - 2;
        }
        if (cur == 0) {
          inc = true;
        }
        inc2 == true ? cur2++ : cur2--;
        if (cur2 == fonts.length) {
          inc2 = false;
          cur2 = fonts.length - 2;
        }
        if (cur2 == 0) {
          inc2 = true;
        }
        document.getElementById('tc').style.fontWeight = fonts[cur];
        document.getElementById('sc').style.fontWeight = fonts[cur2];
      }, 200)
    }

    document.getElementById('font-animate').addEventListener('mouseenter', font_animate);

    function init_font() {
      clearInterval(time);
      document.getElementById('tc').style.fontWeight = fonts[0];
      document.getElementById('sc').style.fontWeight = fonts[0];
    }

    document.getElementById('font-animate').addEventListener('mouseleave', init_font);

    if (IsPC()) {
      // 页面初始化，先执行2秒动画，加载所有字体
      font_animate();
      setTimeout(function () {
        init_font();
      }, 2000);
    } else {
      font_animate();// 如果是手机，动画一直执行，因为没有鼠标事件
    }

    var ua = window.navigator.userAgent;
    var isSafari = ua.indexOf('Safari') != -1 && ua.indexOf('Version') != -1;

    // Safari 上没有 loading 动画，因为safari的理解是将所有资源，还包含视频加载完后，才触发 onload 事件
    if (!isSafari) {
      window.onload = function () {
        document.getElementById('loading').style.display = 'none';
      }
    } else {
      document.getElementById('loading').style.display = 'none';
    }

    // 动画点击后是【激活】状态
    var position_li = document.querySelectorAll('.position');
    var mouseenter, click;
    position_li.forEach(function (e, i) {
      e.addEventListener('mouseenter', function () {
        if (click) return;
        mouseenter = true;
        position_li.forEach(function (e, j) {
          e.className = i == j ? 'position hover' : 'position stop'
        })
      })
      e.addEventListener('mouseleave', function () {
        if (click) return;
        mouseenter = false;
        setTimeout(function () {
          position_li.forEach(function (e, j) {
            if (!mouseenter) {
              e.className = 'position'
            }
          })
        }, 1000)
      })
      e.addEventListener('click', function () {
        click = true;
        position_li.forEach(function (e, j) {
          e.className = i == j ? 'position active' : 'position stop'
        })
        document.querySelectorAll('.job div').forEach(function (e, k) {
          e.className = i == k ? '' : 'none'
        })
      })
    })
  }
)();
